<template>
  <div class="main" v-if="isShowPop" :style="{height:heightVal +'px', overflow: 'auto'}">
    <div v-for="(item, index) in onelist" :key="index" :class="['classItem', index === vuexNum ? 'active' : '']" @click="handlerClickid(index)">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  props: ["isShowPop", "outList",'vuexNum','heightVal'],
  data() {
    return {
      onelist: this.outList,
    };
  },
  methods:{
    handlerClickid(index){
      // console.log(index);
      this.$emit('handlerValue',index)
    },
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 162px;
  // height: 104px;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.15);
  opacity: 1;
  border-radius: 16px;
   padding: 0px 4px;
   padding-bottom: 4px;
  
  .classItem {
    width: 154px;
    height: 48px;
    font-size: 16px;
    opacity: 1;
    border-radius: 12px;   
    padding: 14px 12px;
     position: relative;
    color: var(--font);
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 12px;
        right: 12px;
        height: 1px;
        transform: scaleY(0.25);
        background-color: var(--border);
      }
       &:last-child::after {
        // background-color: transparent
        height: 0;
      }
  }
  & .classItem:nth-child(1){
    margin-top: 5px;
  }
  .active{
        background: rgba(10, 89, 247, 0.1);
        color: var(--color_blue);
  }
}
</style>